<template>
  <!--模态窗 多行-->
  <transition
    name="custom-classes-transition"
    enter-active-class="animated fadeInDown"
    leave-active-class="animated fadeOutUp"
  >

    <div class="modal-ctrl-body" v-show="detailsPoliceObj.isShow">
      <div class="modal-ctrl-main even-row-ctrl">
        <div class="modal-title">
          <p>查询警员详情</p>
        </div>
        <div class="modal-ctrl-content">
          <div class="even-row">
            <!--通用 -->
            <div class="modal-row" >
              <div class="modal-form-key f-l">
                警员姓名：
              </div>
              <input type="text" v-model="detailsPoliceData.name" class="modal-text f-l" readonly="readonly">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                警员性别：
              </div>
              <input type="text" v-model="detailsPoliceData.gender" class="modal-text f-l" readonly="readonly">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                警员代码：
              </div>
              <input type="text" v-model="detailsPoliceData.policeCode" class="modal-text f-l" readonly="readonly">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                移动电话：
              </div>
              <input type="text" v-model="detailsPoliceData.telephone" class="modal-text f-l" readonly="readonly">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                办公电话：
              </div>
              <input type="number" v-model="detailsPoliceData.officeTel" class="modal-text f-l" readonly="readonly">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                职位：
              </div>
              <input type="text" v-model="detailsPoliceData.policePositionName" class="modal-text f-l" readonly="readonly">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                警员类型：
              </div>
              <input type="text" v-model="detailsPoliceData.policeTypeName" class="modal-text f-l" readonly="readonly">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                所属单位：
              </div>
              <input type="text" v-model="detailsPoliceData.stationName" class="modal-text f-l" readonly="readonly">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                警员状态：
              </div>
              <input type="text" v-model="detailsPoliceData.statusName" class="modal-text f-l" readonly="readonly">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                排序：
              </div>
              <input type="text" maxlength="4" placeholder="最长4位字符" v-model="detailsPoliceData.sort" class="modal-text f-l" readonly="readonly">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                是否为领导：
              </div>
              <input type="text" v-model="detailsPoliceData.isLeaderName" class="modal-text f-l" readonly="readonly">
            </div>

            <div class="modal-row">
              <div class="modal-form-key f-l">
                生日：
              </div>
              <input type="text" v-model="detailsPoliceData.birthday" class="modal-text f-l" readonly="readonly">
            </div>

            <div class="modal-row photo" style="display: block">
              <div class="modal-form-key f-l">
                警员相片：
              </div>
              <img :src="photoSrc" style="width:100px" class="f-l" alt="">
            </div>

          </div>
        </div>
        <div class="btns text-r">

          <button type="button" class="btn btn-info" @click="close">关闭</button>
        </div>
        <!--{{userDetailsModal.obj @click="layoutFn('close')" }}-->
      </div>
    </div>
  </transition>
</template>

<script>
  export default {
    name: "policeDetails",
    props:["detailsPoliceObj","policeId"],
    data(){
      return{
        detailsPoliceId:"",
        photoSrc:"",
        detailsPoliceData:{
          birthday:"",
          name:"",
          gender:"",
          policeCode:"",
          telephone:"",
          officeTel:"",
          policePositionName:"",
          policeTypeName:"",
          stationName:"",
          statusName:"",
          sort:"",
          isLeaderName:""
        }
      }
    },
    watch:{
      detailsPoliceObj:{
        handler(v1){
          //console.log(v1);
          if( v1.isShow === true ){
            this.detailsPoliceId = this.policeId;
            this.getPoliceDetailsData();
          }
        },
        deep:true
      }
    },
    methods:{
      //获取警员详情
      getPoliceDetailsData(){
        this.$axios.get(this.HOST+"/police/",{
          params:{
            policeId:this.detailsPoliceId
          }
        })
          .then((data)=>{
            //console.log(data);
            let successData = data.data.data;
            for( let detailsPoliceDataKey in this.detailsPoliceData ){
              for( let successDataKey in successData ){
                if( detailsPoliceDataKey === successDataKey ){
                  this.detailsPoliceData[successDataKey] = successData[successDataKey];
                }
              }
            }

            if( successData.pictureUrl ){
              this.photoSrc = baseURL+"api/jp-TIFS-FileCenter-ms/file?businessId="+successData.pictureUrl;
            }else{
              this.photoSrc = "";
            }

          })
          .catch((err)=>{
            //console.log(err);
          })
      },
      //关闭查询弹窗
      close(){
        this.clearData();
        this.$emit("policeDetailsClose");
      },
      clearData(){
        this.detailsPoliceData={
          birthday:"",
            name:"",
            gender:"",
            policeCode:"",
            telephone:"",
            officeTel:"",
            policePositionName:"",
            policeTypeName:"",
            stationName:"",
            statusName:"",
            sort:"",
            isLeaderName:""
        }
      }
    }
  }
</script>

<style scoped>

</style>
